<script setup>
import HeadTabar from '@/components/Student/HeadTabar.vue'
// import { ImageProps } from 'element-plus'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
const router = useRouter()
import { UseCourseStore } from '@/stores'
const useCourseStore = UseCourseStore()
import { storeToRefs } from 'pinia'
// import { useAppStore } from '@/stores'
// import { onMounted } from 'vue'
const { detailData } = storeToRefs(useCourseStore)
console.log(useCourseStore.detailData)
//是否有新内容
// const hasNewContent = ref(false)
// const not = useAppStore()
// const { tableData } = storeToRefs(not)
// const { getNotice } = not

// const fetNotice = () => {
//   if (tableData.value.length > tableData.value.length - 1) {
//     hasNewContent.value = !hasNewContent.value
//     getNotice()
//   } else {
//     hasNewContent.value = false
//   }
//   //当用户点击了收件箱就取消小红点
// }
// onMounted(() => {
//   fetNotice()
// })

// //清除小红点
// const clearNotice = () => {
//   hasNewContent.value = false
// }
</script>
<template>
  <div id="home">
    <head-tabar></head-tabar>
    <el-container style="margin-top: 5rem; height: 100%">
      <el-aside style="width: 15.625rem; margin-left: 0.625rem; border-radius: 0.3125rem">
        <el-scrollbar>
          <div class="aside-user">
            <div class="user">
              <el-image
                style="height: 25.5rem; width: 25.5rem; margin-top: 2.75rem"
                fit="scale-down"
                :src="detailData.courseImage"
              ></el-image>
              <p style="font-size: 1.2rem; text-align: center; margin-bottom: 6.25rem">
                {{ detailData.courseName }}
              </p>
            </div>
            <el-menu class="el-menu-vertical-demo" style="height: 100%" router>
              <el-menu-item index="/detail/introduce">
                <i class="el-icon-chat-dot-square"></i>
                <template v-slot:title>
                  <span>课程介绍</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/detail/content">
                <i class="el-icon-s-custom"></i>
                <template v-slot:title>
                  <span>章节目录</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/detail/Exam">
                <i class="el-icon-cloudy"></i>
                <template v-slot:title>
                  <span>考试</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/detail/task">
                <i class="el-icon-setting"></i>
                <template v-slot:title>
                  <span>任务</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/detail/knowLedge">
                <i class="el-icon-edit"></i>
                <template v-slot:title>
                  <span>学习记录</span>
                </template>
              </el-menu-item>
            </el-menu>
          </div>
        </el-scrollbar>
      </el-aside>

      <el-main style="padding: 0rem; margin-left: 1.25rem; margin-right: 1.25rem">
        <el-scrollbar>
          <router-view></router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
#home {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #f1f1f1;

  .aside-user {
    height: 100vh;

    .user {
      height: 17.5rem;
      background-color: white;
      background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .el-menu-vertical-demo {
    top: -5rem;
  }
}
.red-dot {
  /* 小红点的样式 */
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 8px;
  /* 其他你需要的样式 */
}
</style>
